<template>
<div class="home-container">
    <header-component />
    <div class="content-wrapper">
        <channel-list :initialChannelId="activeChannel" @channel-change="handleChannelChange" />
        <back-to-top :visibilityHeight="100" />
        <footer-component />
    </div>
</div>
</template>

<script>
import ChannelList from '@/components/ChannelList.vue'
import BackToTop from '@/components/BackToTop.vue'
import FooterComponent from '@/components/Footer.vue'
import HeaderComponent from '@/components/Header.vue'

export default {
    name: 'HomePage',
    components: {
        ChannelList,
        BackToTop,
        FooterComponent,
        HeaderComponent
    },
    data() {
        return {
            activeChannel: '0'
        }
    },
    methods: {
        handleChannelChange(channelId) {
            this.activeChannel = channelId
        }
    }
}
</script>

<style scoped>
.home-container {
    min-height: 100vh;
    background-color: #f5f7fa;
    display: flex;
    flex-direction: column;
    position: relative;
    padding-bottom: 0;
}

.fixed-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
}

.content-wrapper {
    margin-top: 0px;
    /* Header的高度 */
    flex: 1;
}

/* 移动端适配 */
@media (max-width: 768px) {
    .content-wrapper {
        padding: 0 10px;
    }

    /* 当有底部导航时，移动端页脚调整 */
    .footer {
        margin-bottom: 56px;
    }
}

/* 超小屏幕优化 */
@media (max-width: 480px) {
    .content-wrapper {
        padding: 0 5px;
    }
}
</style>